<template>
  <el-container>
    <el-header style="background-color: #687179">
      <div
        class="demo-type"
        @error="errorHandler"
        style="display: flex; align-items: center"
      >
        <el-avatar
          src="https://img1.baidu.com/it/u=3239305818,3903577964&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto"
          :size="50"
        ></el-avatar>
        <span style="font-size: 20px; margin-left: 15px; color: white"
          >个人学习</span
        >
      </div>

      <div
        class="temperature"
        style="
          position: absolute;
          top: 30px;
          right: 40px;
          transform: translateY(-50%);
        "
      >
        <Temperature />
      </div>
      <div style="position: absolute; top: 18px; right: 5px">
        <ScreenFull />
      </div>
      <div style="position: absolute; top: 18px; right: 200px">
        <change-language />
      </div>
    </el-header>
    <el-container>
      <el-aside width="auto">
        <Menu />
      </el-aside>
      <el-container>
        <!-- 需要切换背景的容器 -->
        <el-main :style="getWallPaper" class="wallPaper">
          <TagsView />
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" />
          <!-- <router-view></router-view> -->
        </el-main>
        <el-footer
          style="
            background-color: #687179;
            color: #dcdcdc;
            text-align: center;
            line-height: 60px;
            padding: 0 20px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          "
        >
          <div class="footer-content">
            <p>版权所有 © 2024 DRR. All rights reserved.</p>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>

import Menu from '../components/container/aside.vue'
import TagsView from '../components/container/breadcrumb.vue'
import Temperature from '@/components/SmallComponents/weather/temperature.vue';
import ScreenFull from '@/components/common/ScreenFull.vue';
import changeLanguage from '@/i18n/change-language.vue';
export default {
  name: 'defaultLayout',
  data () {
    return {
      wallPaper: {
        type: 'default'
      }
    }
  },
  methods: {
    errorHandler () {
      return true
    }
  },
  components: {
    TagsView,
    Menu,
    Temperature,
    ScreenFull,
    changeLanguage
  },
  computed: {
    getWallPaper () {
      if (this.wallPaper.type == 'picture') {
        return `background-image:url('${this.wallPaper.url}')`
      } else if (this.wallPaper.type == 'color') {
        return `background-color: ${this.wallPaper.url}`
      } else {
        return `background-color: #f3f3f3`
      }
    }
  },
  mounted () {

    if (JSON.parse(localStorage.getItem('wallPaper'))) {
      this.wallPaper = JSON.parse(localStorage.getItem('wallPaper'))
    } else {
      this.wallPaper = {
        type: 'default'
      }
    }
    this.$bus.$on('wallPaper', val => {
      this.wallPaper = val
      localStorage.setItem('wallPaper', JSON.stringify(val))
    })

  },
  beforeDestroy () {
    this.$bus.$off('wallPaper')
  }

}
</script>
<style lang="less" scoped>
body,
html,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #dcdcdc;
  background-color: #1e1e1e;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
}

.el-aside {
  background-color: #d3dce6;
}

.el-main {
  height: calc(
    ~"100vh - 120px"
  ); // 120px 是header和footer的高度和,记得减号前后要有空隙
}
.wallPaper {
  background-size: cover;
  background-repeat: no-repeat;
}
.footer-content {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 12px;
  color: #dcdcdc;
}
</style>


